<template>
  <div class="table-container">
    <table class="data-table">
      <thead>
        <tr>
          <th>ID</th>
          <th>课题名称</th>
          <th>合作单位</th>
          <th>负责人</th>
          <th>开始时间</th>
          <th>结束时间</th>
          <th>经费(万元)</th>
          <th>项目编号</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="project in projects" :key="project.id">
          <td>{{ project.id }}</td>
          <td>{{ project.projectName }}</td>
          <td>{{ project.cooperationUnit }}</td>
          <td>{{ project.principal }}</td>
          <td>{{ formatDate(project.startDate) }}</td>
          <td>{{ formatDate(project.endDate) }}</td>
          <td>{{ project.funding }}</td>
          <td>{{ project.projectNumber }}</td>
          <td>
            <span :class="getStatusClass(project.status)">
              {{ getStatusText(project.status) }}
            </span>
          </td>
          <td class="action-buttons">
            <button class="action-btn edit" @click="$emit('edit', project)">编辑</button>
            <button class="action-btn delete" @click="$emit('delete', project.id)">删除</button>
            <button v-if="project.status === 0" class="action-btn success" @click="$emit('audit', project.id, 1)">通过</button>
            <button v-if="project.status === 0" class="action-btn danger" @click="$emit('audit', project.id, 2)">拒绝</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps(['projects']);

function formatDate(date) {
  if (!date) return '';
  return new Date(date).toLocaleDateString();
}

function getStatusText(status) {
  switch (status) {
    case 0: return '待审核';
    case 1: return '已通过';
    case 2: return '已拒绝';
    default: return '未知';
  }
}

function getStatusClass(status) {
  return `status-badge status-${status}`;
}
</script>

<style scoped>
.table-container {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 15px;
  text-align: left;
  font-weight: 600;
  font-size: 14px;
}

.data-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

.data-table tbody tr:hover {
  background-color: #f8f9fa;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  min-width: 60px;
}

.status-0 {
  background-color: #fff3cd;
  color: #856404;
}

.status-1 {
  background-color: #d4edda;
  color: #155724;
}

.status-2 {
  background-color: #f8d7da;
  color: #721c24;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.action-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s ease;
}

.action-btn.edit {
  background: #17a2b8;
  color: white;
}

.action-btn.edit:hover {
  background: #138496;
}

.action-btn.delete {
  background: #dc3545;
  color: white;
}

.action-btn.delete:hover {
  background: #c82333;
}

.action-btn.success {
  background: #28a745;
  color: white;
}

.action-btn.success:hover {
  background: #218838;
}

.action-btn.danger {
  background: #dc3545;
  color: white;
}

.action-btn.danger:hover {
  background: #c82333;
}
</style> 